<template>
    <basic-container :btnFlag = true>
        <div class="card-border">
            <card-header :header-data="headerData"></card-header>
            <activiti-action ref="action" :task-id="taskId" v-model="form" :footerButtonContrl="false">
                <template slot="footerCenter">
                    <el-button type="primary" @click.stop="submitConfirm">确认</el-button>
                    <el-button type="info" @click.stop="goBack">关闭</el-button>
                </template>
                <template slot="formHeader">
                    <el-form label-position="left" label-width="100px">
                        <el-form-item label="部门人员">
                            <span>{{userInfo.nickname}}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </activiti-action>
            <el-collapse v-model="activeNames" class="collapse">
                <el-collapse-item name="1">
                    <template slot="title">
                        <div class="card-header collapse-header">
                            <div class="head-title collapse-title">基本信息</div>
                            <div class="head-explain">
                                操作说明
                                <i class="el-icon-question"></i>
                            </div>
                        </div>
                    </template>
                    <bostech-detail :detail-data="detailData"></bostech-detail>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">
                        <div class="card-header collapse-header">
                            <div class="head-title collapse-title">规划信息</div>
                            <div class="head-explain">
                                操作说明
                                <i class="el-icon-question"></i>
                            </div>
                        </div>
                    </template>
                    <list-register-info :listId="listId"></list-register-info>
                </el-collapse-item>
            </el-collapse>
        </div>
    </basic-container>
</template>
<script>
    import {getbasisinfo} from "@/api/planning/detailList";
    import {planningListCheck} from "@/api/planning/detailList";
    import { PROJECT_DIC } from "@/const/dict";
    import { mapGetters } from "vuex"
    import activitiAction from "@/components/activiti/action";
    import listRegisterInfo from "@/components/list/listRegisterInfo"

    export default {
        name: "firstTrialFor",
        components: {
            activitiAction,
            listRegisterInfo
        },
        data() {
            return {
                form: {},
                taskId: null,
                listId: null,
                infoForm:{
                    title:'',
                    description:'',
                },
                headerData:{
                    title:'报批确认'
                },
                radio:1,
                activeNames: ["1","2"],
                detailData:[],
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                option: {
                    page: true,
                    addBtn: false,
                    editBtn: false,
                    addRowBtn: false,
                    indexLabel: "序号",
                    index: true,
                    indexWidth:70,
                    cellBtn: false,
                    delBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    filterBtn: false,
                    searchBtn: false,
                    keyId: "id",
                    column: [
                        {
                            label: "规划名称",
                            width: 240,
                            prop: "title",
                            cell: true
                        },
                        // {
                        //   label: "规划期限",
                        //   prop: "startEnd",
                        //   cell: true,
                        //   formatter: function (row, value, label, column) {
                        //     return row.startDate + '-' + row.endDate;
                        //   }
                        // },
                        {
                            label: "申报(牵头)单位",
                            prop: "orgName",
                            type: "select",
                            dicData: PROJECT_DIC.ORG_CODE,
                            cell: true
                        },
                        {
                            label: "发布层级",
                            prop: "approvingAuthorityLevel",
                            type: "select",
                            dicData:PROJECT_DIC.APPROVING_AUTHORITY_LEVEL,
                            cell: true
                        },
                        {
                            label: "规划等级",
                            prop: "planningRank",
                            type: "select",
                            dicData: PROJECT_DIC.PLANNING_RANK,
                            cell: true
                        }
                    ]
                },
            };
        },
        computed: {
            ...mapGetters([
                "userInfo"
            ])
        },
        created() {
            this.taskId = this.$route.params.taskId;
            this.listId = this.$route.query.listId;
            this.getList();
        },
        methods: {
            goBack(){
                this.$router.go(-1);
            },
            getList(page){
                this.page = page;
                getbasisinfo(this.listId).then(response => {
                    this.infoForm.title = response.data.data.title;
                    this.infoForm.description = response.data.data.description;
                    this.detailData = [{label: '清单标题', value:this.infoForm.title },{label: '清单说明', value:this.infoForm.description}];
                    this.tableData =  response.data.data.planningRegisterinfoList;
                    this.taskId=response.data.data.taskId;
                })
            },
            submitConfirm(){
                this.$refs.action.validateForm(() => {
                    this.validateForm(()=>{
                        this.$confirm("是否确定提交?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(() => {
                            this.submit()
                        });
                    },()=>{
                        this.formValidateErrorNotify();
                    })
                },()=>{
                    this.validateForm(()=>{
                        this.formValidateErrorNotify();
                    },()=>{
                        this.formValidateErrorNotify();
                    })
                });
            },
            formValidateErrorNotify(){
                this.$notify({
                    title: '错误',
                    message: '表单存在错误，请按提示修改',
                    type: 'error',
                    duration: 2000
                });
            },
            validateForm(successFunc, errorFunc) {
                if (this.$refs.form != null) {
                    this.$refs.form.validate((valid, object) => {
                        if (valid) {
                            if (successFunc != null) {
                                successFunc();
                            }
                        } else {
                            if (errorFunc != null) {
                                errorFunc(object);
                            }
                        }
                    });
                }else {
                    if (successFunc != null) {
                        successFunc();
                    }
                }
            },
            submit(){
                let params = this.form;
                planningListCheck(this.taskId, params).then(response => {
                    if (response.data.code == 0) {
                        this.$notify({
                            title: '成功',
                            message: '提交成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.$router.go(-1);
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .collapse {
        margin-top: 2rem;
    }
</style>
